<template>
  <view class="main">
    <uni-card spacing="0" padding="0">
      <view class="row">
        <uni-row>
          <uni-col :span="2">
            <image class="image-header" src="@/static/images/tiaoxingtu.svg"></image>

          </uni-col>
          <uni-col :span="22">
            <view class="title">发电排名分析(当日)</view>
          </uni-col>
        </uni-row>
      </view>
      <u-line></u-line>
      <view class="body">
        <div class="button-container">
          <button class="mini-btn" :class="{ 'active': selectedButton === 1 }" type="primary" size="mini"
            @click="selectButton(1, getMonthPowers)">100kW排名前十</button>
          <button class="mini-btn" :class="{ 'active': selectedButton === 2 }" type="primary" size="mini"
            @click="selectButton(2, getMonthPowers01)">100kW排名后十</button>
        </div>

      </view>
      <qiun-data-charts type="column" :opts="analyopts"  :chartData="analyData" :reshow="delayload" :ontouch="true" />
    </uni-card>

  </view>
</template>

<script setup>

import { ref, onMounted } from 'vue';
import { getUnitPower10YCData } from '@/api/report'
import { parseTime } from "@/utils/ruoyi";

const delayload = ref(false);
const analyData = ref({});
const average = ref({});
const analyopts = {
  color: ["#91CB74"],
  padding: [24, 36, 20, 20],
  enableScroll: false,
  enableMarkLine: true,
  showTitle: true,
  legend: {
    show: false
  },
  xAxis: {
    axisLineColor: "#000000",
    rotateLabel: true,
    rotateAngle: -45,
    disableGrid: true,
    formatter: function (value) { if (value.length > 2) { return value.substring(0, 5) + '..'; } return value; },
    label: {
      lineHeight: 14, // 设置标签行高
    }
  },
  yAxis: {
    axisLineColor: "#000000",
    showTitle: true,
    splitNumber: 4,
    data: [
      {
        titleOffsetX: 5,
        titleOffsetY: -10,
        min: 0,
        title: "发电量/kWh",
      }
    ]
  },
  extra: {
    column: {
      type: "group",
      width: 20,
      activeBgColor: "#000000",
      activeBgOpacity: 0.08,
      seriesGap: 2,
    },
    markLine: {
      type: "dash",
      data: [
        {
          showLabel: true,
          lineColor: "#91CB74",
          dashLength: 1,
        }
      ]
    }
  }
};
const selectedButton = ref(1);

function selectButton(buttonId, getDataFn) {
  selectedButton.value = buttonId;
  getDataFn();
}

onMounted(() => {
  getMonthPowers();
});

function getMonthPowers01() {
  const par = {
    regionId: 285,
    regionType: 2,
    topOrDownType: 2,
    startDate: parseTime(new Date(), "{y}/{m}/{d}+0:00:00"),
    endDate: parseTime(new Date(), "{y}/{m}/{d}+23:59:59"),
  };

  getUnitPower10YCData(par)
    .then(result => {
      let res = {
        categories: [],
        series: [
          {
            name: "发电量",
            linearColor: [
              [0, "#d81e06"],
            ],
            data: []
          },
        ]
      };
      var category = [];
      for (let i = 0; i < result.attributes.stationTopTenPR.category.length; i++) {
        category[i] = result.attributes.stationTopTenPR.category[i].split(" ")[0];
      }
      for (let i = 0; i < category.length; i++) {
        category[i] = category[i];
      }
      res.categories = category;
      res.series[0].data = result.attributes.stationTopTenPR.series[0].data
      // res.series[1].data = result.attributes.stationTopTenPR.series[1].data
      analyData.value = JSON.parse(JSON.stringify(res));

      const sum = res.series[0].data.reduce((acc, cur) => acc + cur, 0);

      average.value = (sum / res.series[0].data.length).toFixed(2);
      analyopts.extra.markLine.data[0].value = average.value;

      setTimeout(() => {
        delayload.value = true;
      }, 0);
    })
    .catch(error => {
      // 处理错误
    });
}

function getMonthPowers() {
  const par = {
    regionId: 285,
    regionType: 2,
    topOrDownType: 1,
    startDate: parseTime(new Date(), "{y}/{m}/{d}+0:00:00"),
    endDate: parseTime(new Date(), "{y}/{m}/{d}+23:59:59"),
  };

  getUnitPower10YCData(par)
    .then(result => {
      let res = {
        categories: [],
        series: [
          {
            name: "发电量",
            linearColor: [
              [0, "#d81e06"],
            ],
            data: []
          },
        ]
      };
      var category = [];
      for (let i = 0; i < result.attributes.stationTopTenPR.category.length; i++) {
        category[i] = result.attributes.stationTopTenPR.category[i].split(" ")[0];
      }
      for (let i = 0; i < category.length; i++) {
        category[i] = category[i];
      }
      res.categories = category;
      res.series[0].data = result.attributes.stationTopTenPR.series[0].data
      // res.series[1].data = result.attributes.stationTopTenPR.series[1].data
      analyData.value = JSON.parse(JSON.stringify(res));
      const sum = res.series[0].data.reduce((acc, cur) => acc + cur, 0);

      average.value = Math.round(sum / res.series[0].data.length);
      analyopts.extra.markLine.data[0].value = average.value;
      setTimeout(() => {
        delayload.value = true;
      }, 0);
    })
    .catch(error => {
      // 处理错误
    });
}
</script>

<style scoped lang="scss">
.image-header {
  height: 40rpx;
  width: 30rpx;
  margin-top: 20rpx;
  margin-bottom: -5rpx;
  margin: 15rpx 0 5rpx 15rpx;
}

.title {
  display: inline-block;
  color: #000000;
  margin-left: 10rpx;
  position: absolute;
  top: 15rpx;
}

.body {
  margin-top: 30rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-bottom: 30rpx;
}

.row {
  padding: 20rpx 20rpx 12rpx 20rpx;
  color: black;

  .image-header {
    height: 40rpx;
    width: 40rpx;
    margin-left: 4rpx;
  }

  .title {
    margin-left: -4rpx;
    font-size: 32rpx;
  }
}

.main {
  background-color: #f4f4f5;
  height: 100%;
  width: 100%;
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  /* 调整按钮组与下方内容的间距 */
}

.mini-btn {
  background-color: white;
  color: green;
  margin-right: 20rpx;
  /* 调整按钮之间的间距 */
  margin-left: 25rpx;
}

.mini-btn.active {
  background-color: green;
  color: white;
}
</style>
